 <template>
  <div>
     <h3>KGC新闻</h3>
     <div class="pindao"><ul><li v-for="item in pindaoshuju" :key="item">{{item}}</li></ul>
    <div class="jiahao" @click="tiaozhuan"><img src="../assets/add.png" class=""></div></div>
    </div>
</template>

<script>
export default {
  name: 'vNav',
  
  props:{
     
  },
  computed:{
      pindaoshuju(){
          return this.$store.state.pindaolist
      }
  },
  data(){
    return {

    }
  },
  mounted(){
   this.$axios.get("nav.json").then(
       res=>{this.$store.commit("muChannels",res.data.result)}
   ).catch(err=>{console.log(err)}) 
  },
  methods:{
   tiaozhuan(){
       this.$router.push("/channelManage")
   }
  }
}
</script>

<style scoped>
h3{
    width:100%;
    height:1.2rem;
    background-color:#d43d3d;
    color:#fff;
    text-align:center
}
.pindao{
    width:100%;
    height:0.96rem;
    background-color:#f4f5f6;
    color:#505050;
    position:relative;
    overflow:hidden;
}
.pindao ul{
  width:50rem;
  height:0.9rem;
  overflow-x: scroll;
  padding-left:1rem 
}
.pindao li{
    float:left;
    list-style:none;
    margin-right:2rem;
    font-size:0.8rem;
}
.jiahao{
    width:0.96rem;
    position:absolute;
    right:0;
    top:0;
}
.jiahao img{
    width:0.96rem;
     background-color:#f4f5f6;
}
</style>

